<template>
	<view id="myview" v-for="v in yonghuData">
		<view>
			<view>
				<text class="iconfont icon-xiangzuojiantou"></text><text>设置</text>
			</view>
		</view>
			<view id="touxiang" @click="touxiang">
				<view><text>头像</text></view>
				<view>
					<image :src="IP+imgsrc" mode=""></image>
					<view><text class="iconfont icon-youjiantou"></text></view>
				</view>
			</view>
		<view id="telephonenumber" @click="shoujishezhi">
			<view><text>手机号</text></view>
			<view><text class="iconfont icon-youjiantou"></text></view>
		</view>
		<view id="tuisong" @click="tuisong">
			<view><text>推送设置</text></view>
			<view><text class="iconfont icon-youjiantou"></text></view>
		</view>
		<view id="qingchuhuancun" @click="qingchuhuancun">
			<view><text>清除缓存</text></view>
			<view><text>111M</text><text class="iconfont icon-youjiantou"></text></view>
		</view>
		<view id="jianchagengxin" @click="jianchagengxin">
			<view><text>检查更新</text></view>
			<view><text class="iconfont icon-youjiantou"></text></view>
		</view>
		<view id="tuichudenglu" @click="Logout"><text>退出登录</text></view>
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="info" message="目前为最新版本" :duration="2000"></uni-popup-message>
		</uni-popup>
<!-- 		<view>
		    <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
		    <button type="primary" @click="takePhoto">拍照</button>
		    <view>预览</view>
		    <image mode="widthFix" :src="src"></image>
		</view> -->
	</view>
</template>

<script>
	import {ref,reactive,toRefs,onMounted,computed} from 'vue'
	import http from '../../utils/http.js'
	import {useStore} from 'vuex'
	import store from '../../store/index.js'
	export default {
		setup(){
			const {state,commit,dispatch,getters} = useStore();
			let data=reactive({
				IP:'',
				y_id:'',
				yonghuData:[],
				imgsrc:'',
				imageArr:[],
				tuisong:()=>{
					uni.navigateTo({
						url:'../tuisongshezhi/tuisongshezhi'
					})
				},
				shoujishezhi:()=>{
					uni.navigateTo({
						url:"../shoujishezhi/shoujishezhi"
					})
				},
				//头像上传
				touxiang:()=>{
					uni.showActionSheet({
						 itemList: ['拍照','从相册选择'],
						 success: function (res) {
						 		console.log(res);
								const token =uni.getStorageSync('token')
								if(res.tapIndex==1){
									uni.chooseImage({
										count: 6, //默认9
										sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
										sourceType: ['album'], //从相册选择
										success: function (res) {
											// console.log(res.tempFilePaths);
											// console.log(res.tempFiles[0].path);
											const tempFilePaths = res.tempFilePaths;
											uni.uploadFile({
												url: data.IP+'/takeTouxiangImg',
												filePath: tempFilePaths[0],
												name:'file',
												header:{'token':token},
												success: function(res) { ///返回！！！！！！
													console.log(res.data);
													http({
														url:'/appUpdateTouxiang',
														method:'post',
														data:{
															imgName:res.data
														}
													}).then((res)=>{
														data.IP=store.state.IP
														console.log(data.IP)
														http({
															url:'/appGetYonghuData',
															method:'get',
															data:{
																y_id:data.y_id
															}
														}).then((res)=>{
															data.yonghuData=res.data.data
															data.imgsrc=data.yonghuData[0].y_imgsrc
															store.state.takeTouxiangImg.src=data.imgsrc
															console.log(store.state.takeTouxiangImg.src)
														})
														
													})
													
												},
												fail: function(e) {
													console.log(e)
												}												
											})
										}
									});
								}
								else if(res.tapIndex==0){
									uni.navigateTo({
										url:'../takePhoto/takePhoto'
									})
								}
						 	},
						 	fail: function (res) {
						 		console.log(res.errMsg);
						 	}
					})
				},
				//检查更新
				
				jianchagengxin(){
					console.log('进来了')
					this.$refs.popup[0].open('center')
					setTimeout(()=>{
						this.$refs.popup[0].close()
					},1000)
				},
				//清除缓存
				qingchuhuancun:()=>{
					uni.showModal({
						content: '确定要清除本地缓存吗？',
						success: function (res) {
							if (res.confirm) {
								wx.showToast({
								      title: '清除缓存成功',
								      duration:2000
								    })
							} else if (res.cancel) {
								console.log(res);
							}
						},
						
					});
				},
				
				// 退出登录
				Logout(){
					state.userID=''
					uni.setStorageSync('token', '');
					// 关闭所有页面跳转
					uni.reLaunch({
						url:'../login/login'
					})
				}
			})
			onMounted(()=>{
				
				data.IP=store.state.IP
				data.y_id=store.state.userID;//获取当前用户id
				http({
					url:'/appGetYonghuData',
					method:'get',
					data:{
						y_id:data.y_id
					}
				}).then((res)=>{
					data.yonghuData=res.data.data
					data.imgsrc=data.yonghuData[0].y_imgsrc
				})
			})
			return{...toRefs(data)}
		},
		onShow() {
		
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	#myview>view:nth-child(1){
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #f2f2f2;
		>view:nth-child(1){
			width: 120rpx;
			height: 80rpx;
			text-align: center;
		}
	}
	#touxiang{
		width: 750rpx;
		height: 100rpx;
		border-bottom: 1px solid #f2f2f2;
		line-height:100rpx;
		display: flex;
		justify-content: space-between;
		padding-left:30rpx;
		padding-right: 50rpx;
		box-sizing: border-box;
		>view:nth-child(2){
			height:100rpx;
			line-height: 100rpx;
			display: flex;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-top: 20rpx;
				border-radius: 50rpx;
				margin-right: 10rpx;
			}
		}
	}
	#telephonenumber,#tuisong,#jianchagengxin,#qingchuhuancun{
		width: 750rpx;
		height: 100rpx;
		border-bottom: 1px solid #f2f2f2;
		line-height:100rpx;
		display: flex;
		justify-content: space-between;
		padding-left:30rpx;
		padding-right: 50rpx;
		box-sizing: border-box;
	}
	#tuichudenglu{
		width: 500rpx;
		height: 100rpx;
		background-color: #DA2222;
		text-align: center;
		line-height: 100rpx;
		margin-top:200rpx;
		color: white;
		margin-left: 125rpx;
	}



</style>
